﻿<div class="content-wrapper">
    <section class="content-header">
        <h1>
            监控记录
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active"><a href="#">监控记录</a></li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" placeholder="开始时间" style="width:120px;">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" placeholder="结束时间" style="width:120px;">
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_search" v-on:click="searchL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                            </button>
                        </div>
                        <table id="bootstraptable" class="table table-bordered text-nowrap table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                datemin: '',
                datemax: '',
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.DeviceDataHistoryMonitor.parentNode.parentNode.classList.add("active");
                    _self.$refs.DeviceDataHistoryMonitor.classList.add("active");

                    _self.datemin = _self.getCurrentYearFirst();
                    _self.datemax = _self.getCurrentMonthLast();
                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });

                    setTimeout(function () {
                        _self.loadL();
                        setDataCardView("#bootstraptableCurrent");
                        //$("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "设备名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    _self = this;
                    //设备当前实时数据
                    var objCurrent = [{
                        field: '#',
                        title: '#',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'ClientArea',
                        title: '区域',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        visible: false
                    }, {
                        field: 'ClientName',
                        title: '站点名称',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'DeviceName',
                        title: '设备名称',
                        valign: 'middle',
                        align: 'center',
                        sortable: true
                    }, {
                        field: 'LastTime',
                        align: 'center',
                        valign: 'middle',
                        title: '监测时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return _self.jsonDateFormat(value);
                        }
                    }, {
                        field: 'ParameterStatus',
                        align: 'center',
                        valign: 'middle',
                        title: '状态',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var status = "";
                            if (row.ParameterStatus1 == 0 && row.ParameterStatus2 == 0 && row.ParameterStatus3 == 0
                                && row.ParameterStatus4 == 0) {
                                status = "label-success";
                            }
                            else if (row.ParameterStatus1 == 2 || row.ParameterStatus2 == 2 || row.ParameterStatus3 == 2
                                || row.ParameterStatus4 == 2) {
                                status = "label-danger";
                            }
                            else {
                                status = "label-warning";
                            }

                            if (status == "label-success") {
                                status = '<span class="label ' + status + '">正常</span>'
                                return status;
                            }
                            else if (status == "label-danger") {
                                status = '<span class="label ' + status + '">报警</span>'
                                return status;
                            }
                            else {
                                status = '<span class="label ' + status + '">故障</span>'
                                return status;
                            }

                        }
                    }, {
                        field: 'ParameterName',
                        align: 'left',
                        valign: 'middle',
                        title: '监测参数',
                        width: 100,
                        formatter: function (value, row, index) {
                            var para1 = "";
                            var para2 = "";
                            var para3 = "";
                            var para4 = "";

                            if (row.ParameterStatus1 == 0) {
                                para1 = "label-success";
                            } else {
                                if (row.ParameterStatus1 == 1) {
                                    para1 = "label-warning";
                                } else {
                                    para1 = "label-danger";
                                }
                            }
                            para1 = '温度:<span class="label ' + para1 + '">' + row.ParameterValue1 + '℃;</span>&emsp;';

                            if (row.ParameterStatus2 == 0) {
                                para2 = "label-success";
                            } else {
                                if (row.ParameterStatus2 == 1) {
                                    para2 = "label-warning";
                                } else {
                                    para2 = "label-danger";
                                }
                            }
                            para2 = '湿度:<span class="label ' + para2 + '">' + row.ParameterValue2 + '%;</span>&emsp;';

                            if (row.ParameterStatus3 == 0) {
                                para3 = "label-success";
                            } else {
                                if (row.ParameterStatus3 == 1) {
                                    para3 = "label-warning";
                                } else {
                                    para3 = "label-danger";
                                }
                            }
                            para3 = '液位:<span class="label ' + para3 + '">' + row.ParameterValue3 + 'mm;</span>&emsp;';

                            if (row.ParameterStatus4 == 0) {
                                para4 = "label-success";
                            } else {
                                if (row.ParameterStatus4 == 1) {
                                    para4 = "label-warning";
                                } else {
                                    para4 = "label-danger";
                                }
                            }
                            para4 = '有毒有害:<span class="label ' + para4 + '">' + row.ParameterValue4 + 'ppm;</span>&emsp;';

                            return para1 + "&nbsp;" + para2 + "&nbsp;" + para3 + "&nbsp;" + para4 + "<br/>";
                        }
                    }, {
                        field: 'ParameterValue5',
                        align: 'center',
                        title: '摄像头截图',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<img src='../image/1.jpg' style='width:200px;height:150px'/>";
                        }
                        }];
                    yui.table("bootstraptable", "/DeviceDataHistory/HistoryMonitorList", objCurrent, "POST", "ClientId", true, false, "CreateDate", "desc", true);

                },
                searchL() {
                    $("#bootstraptable").bootstrapTable('refresh');
                }
            },
        });
    </script>
}